<template>

	<view class="components-time-line">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">物流详情
		</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>

		<loading v-if="loading"></loading>

		<view :style="{paddingTop:'calc('+vuex_custom_bar_height+'px)'}" class="con" v-else>
			<view class="top">
				<image :src="emsdata.expressCompanyLogo" class="top__logo" mode="aspectFill"></image>
				{{emsdata.expressCompanyName}}
				{{emsdata.number}}

				<text style="margin-left: 40rpx;" @click="copy(emsdata.number)">复制</text>

			</view>
			<view class="" style="padding:0 30rpx;border-bottom: 1rpx solid #f0f0f0;">
				<view class="time-line__wrap">
					<tn-time-line>
						<block v-for="(item, index) in emsdatalist" :key="index">
							<view class="tn-time-line-item-class tn-time-line-item">
								<view>
									<view>
										<view v-if="item.status === 'ACCEPT'" class="time-line-item__content__title">已揽件
										</view>
										<view v-if="item.status === 'TRANSPORT'" class="time-line-item__content__title">
											运输中</view>
										<view v-if="item.status === 'DELIVERING'"
											class="time-line-item__content__title">派送中</view>
										<view v-if="item.status === 'SIGN'" class="time-line-item__content__title">已签收
										</view>
										<view class="time-line-item__content__desc">{{ item.desc }}</view>
										<view class="time-line-item__content__time">
											{{timeFormat(item.time,'yyyy.mm.dd hh:MM:ss')}}
										</view>
									</view>
								</view>
								<view class="tn-time-line-item__node" :style="{top:item.status===0?'12rpx':'2rpx'}">
									<view class="time-line-item__node" v-if="item.status != 0">
										<view v-if="item.status === 'ACCEPT'"
											class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
										<view v-if="item.status === 'TRANSPORT'"
											class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
										<view v-if="item.status === 'DELIVERING'"
											class="time-line-item__node--icon tn-icon tn-icon-my"></view>
										<view v-if="item.status === 'SIGN'"
											class="time-line-item__node--icon tn-icon tn-icon-success"></view>
									</view>
									<view class="tn-time-line-item__node--dot" v-else></view>
								</view>
							</view>
							<!-- <tn-time-line-item :top="item.status === 0 ? '' : 2">
								<template v-if="item.status != 0" slot="node">
									<view class="time-line-item__node">
										<view v-if="item.status === 'ACCEPT'"
											class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
										<view v-if="item.status === 'TRANSPORT'"
											class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
										<view v-if="item.status === 'DELIVERING'"
											class="time-line-item__node--icon tn-icon tn-icon-my"></view>
										<view v-if="item.status === 'SIGN'"
											class="time-line-item__node--icon tn-icon tn-icon-success"></view>
									</view>
								</template>
								<template slot="content">
									<view>
										<view v-if="item.status === 'ACCEPT'"
											class="time-line-item__content__title">已揽件</view>
										<view v-if="item.status === 'TRANSPORT'"
											class="time-line-item__content__title">运输中</view>
										<view v-if="item.status === 'DELIVERING'"
											class="time-line-item__content__title">派送中</view>
										<view v-if="item.status === 'SIGN'"
											class="time-line-item__content__title">已签收</view>
										<view class="time-line-item__content__desc">{{ item.desc }}</view>
										<view class="time-line-item__content__time">
											{{timeFormat(item.time,'yyyy.mm.dd hh:MM:ss')}}</view>
									</view>
								</template>
							</tn-time-line-item> -->
						</block>
					</tn-time-line>
				</view>
			</view>


		</view>

	</view>

</template>

<script>
	import product from '@/api/_product.js'
	export default {
		name: 'componentsTimeline',
		computed: {
		  nodeStyle() {
		    let style = {}
		    if (this.top !== '') style.top = this.top + 'rpx'
		    
		    return style
		  }
		},
		data() {
			return {
				emsdata: {},
				emsdatalist: [],
				id: '',
				loading: true,
				alpha: true,
				top:''
			}
		},
		methods: {
			getdata() {
				product.getEms({
					id: this.id
				}).then(res => {
					if (res.data.code == 1) {
						this.loading = false

						this.emsdata = res.data.data.data

						let arr = []
						res.data.data.data.logisticsTraceDetails.map(t => {
							arr.push(t.logisticsStatus)
							t.status = 0
						})
						for (let key in this.getunip(arr)) {
							res.data.data.data.logisticsTraceDetails[this.getunip(arr)[key][0]].status = res.data
								.data.data.logisticsTraceDetails[this.getunip(arr)[key][0]].logisticsStatus
						}
						this.emsdatalist = res.data.data.data.logisticsTraceDetails
						this.emsdatalist.reverse()

					}
				})
			},
			getunip(arr) {
				let i = 0
				const pre = arr.reduce((pre, cur) => {
					if (pre[cur]) {
						pre[cur].push(i)
					} else {
						pre[cur] = [i]
					}
					i++;
					return pre
				}, {})
				return pre
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getdata()
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		position: relative;
	}

	.tn-time-line-class {
		.tn-time-line-item-class {
			&:first-child {
				.tn-time-line-item__node {
					.time-line-item__node {
						background-color: $tn-main-color !important;
					}
				}
			}
		}
	}

	.time-line {

		&__wrap {
			padding: 30rpx;
		}

		&-item {
			&__node {
				width: 44rpx;
				height: 44rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #AAAAAA;

				&--active {
					background-color: $tn-main-color;
				}

				&--icon {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}

			&__content {
				&__title {
					font-weight: bold;
					font-size: 32rpx;
				}

				&__desc {
					color: $tn-font-sub-color;
					font-size: 28rpx;
					margin-bottom: 6rpx;
				}

				&__time {
					color: #666;
					font-size: 26rpx;
				}
			}
		}
	}

	.top {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		&__logo {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

	}

	.tn-time-line-item {
		display: flex;
		flex-direction: column;
		width: 100%;
		position: relative;
		margin-bottom: 32rpx;

		&__node {
			display: flex;
			flex-direction: row;
			position: absolute;
			top: 12rpx;
			left: -40rpx;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			transform-origin: 0;
			transform: translateX(-50%);
			z-index: 1;
			background-color: transparent;

			&--dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 100rpx;
				background-color: #AAAAAA;
			}
		}
	}
</style>